<template>
  <div id="app">
    <br />
    <!-- 其中type属性控制的是颜色，icon是图标
                primary是蓝色        
                success是绿色
                info是灰色
                warning是黄色
                danger是红色
              -->
    <!-- <el-row>
          <el-button icon="el-icon-search" circle @click="changeflag" ></el-button>
          <input type="text" v-show="isflag" v-model="arrays">
          <el-button type="primary" icon="el-icon-edit" circle @click="changeflagA"></el-button>
         
          <el-button type="success" icon="el-icon-check" circle @click="changeflagB"></el-button>
          <el-button type="info" icon="el-icon-message" circle></el-button>
          <el-button type="warning" icon="el-icon-star-off" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>   
           
    
          <br>
              <textarea v-show="isflagA" v-model="arrays"></textarea> -->
    <!-- <Message ></Message> -->
    <!-- <List v-show="isflagB"></List>
               
        </el-row> -->
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title" style="font-size:31px">书店系统注册</h3>
      <el-form-item>
        <el-input
          type="text"
          v-model="registerForm.userName"
            style="    margin-bottom: 4px;"
          auto-complete="off"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item>
      
    

 <el-input
          type="password"
          v-model="registerForm.password"
          auto-complete="off"
          placeholder="请输入密码"
          style="    margin-bottom: 4px;"
          id="password"
        >
        <template #suffix>
          <el-icon id="yanjing" @click="yanjing" :size="20"  style="display:block" ><View /></el-icon>
          <el-icon id="hideyanjing" @click="hideyanjing" :size="20" style="display:none" ><Hide /></el-icon>
        </template>
      </el-input> 
       
       
      </el-form-item>
      <el-form-item>
        <el-input
          type="address"
          v-model="registerForm.address"
          style="    margin-bottom: 4px;color: #505458;;"
          auto-complete="off"
          placeholder="请输入地址"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="phone"
          v-model="registerForm.phone"
          style="    margin-bottom: 4px;color: #505458;"
          auto-complete="off"
          placeholder="请输入电话"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%; background: #505458; border: none"
          v-on:click="register"
          @keydown.enter="register"
          >注册</el-button
        >
      </el-form-item>
      <!-- <el-form-item style="width: 20%">
          <a
            href="http://127.0.0.1:5173/register"  
            style="
              width: 100%;
              background: blanchedalmond;
              border: none;
              text-decoration: none;
            "
            >注册</a
          >
        </el-form-item> -->
    </el-form>
    <br />
    <!-- <router-link class="home" to="/home">Home</router-link>|
        <keep-alive include="News">
        <router-view></router-view>
        </keep-alive> -->
  </div>
</template>
    
    <script>
    
        
            
                
                    
                    //   import { info } from "console";
                    //   import { success } from "log-symbols";
                    //   import eventBus from "./eventBus";
                    
                    export default {
                      name: "Register",
                      data() {
                        return {
                          registerForm: {
                            userName: "",
                            password: "",
                            successResponse: 0,
                            address: "",
                            phone: "",
                            check:true
                          },
                          responseResult: [],
                          value: "100",
                          xianshi: false,
                          
                        };
                      },
                      methods: {
                        register() {
                          if (this.registerForm.userName==''&&this.registerForm.password==''&&this.registerForm.address==''&&this.registerForm.phone=='') {
                            this.writermessistage()
                          } else {
                            this.useraddresscheck()
                            this.usernamecheck()
                            this.userpasswordcheck()
                             this.phoneformat()
                            if (this.check == true) {
                            this.$axios
                              .post("/register", {
                                userName: this.registerForm.userName,
                                password: this.registerForm.password,
                                address: this.registerForm.address,
                                phone: this.registerForm.phone,
                              })
                              .then((resp) => {
                                if (resp.data.code == 200) {
                                  this.suceessregister()
                                  this.$router.replace({
                                    path: "/login",
                                  });
                                 
                                }   else if (resp.data.code == 500) {
                                  this.registerfail();
                                } else if (resp.data.code == 404) {
                                  this.repeatuser();
                                } 
                              });
                        
                          }
                            
                          }
                         
                        },
                        useraddresscheck() {
                          if (this.registerForm.address == "") {
                            this.alertaddress()
                            this.check=false
                          } else {
                            this.check=true
                          }
                        },
                        usernamecheck() {
                          if (this.registerForm.userName == "") {
                            this.alertuserid()
                            this.check=false
                         } else {
                            this.check=true
                          }
                        },
                        userpasswordcheck() {
                          if (this.registerForm.password == "") {
                            this.alertpassword()
                            this.check=false
                          }else {
                            this.check=true
                          }
                        },
                        phoneformat() {
                          if (this.registerForm.phone == "") {
                            this.alertphone()
                            this.check=false
                          }
                          else {
                             var numReg = /^[0-9]+$/
                          var numRe = new RegExp(numReg)
                          if (numRe.test(this.registerForm.phone)) {
                           this.check=true;
                          } else {
                            this.check=false;
                             this.isNaNphone()
                          }
                          }
                         
                        
                        },
                        alertuserid() {
                          this.$message({
                            message: "请填写账号",
                            type: "error",
                          });
                        },
                        alertpassword() {
                          this.$message({
                            message: "请填写密码",
                            type: "error",
                          });
                        },
                        alertaddress() {
                          this.$message({
                            message: "请填写地址",
                            type: "error",
                          });
                        },
                        alertphone() {
                          this.$message({
                            message: "请填写电话",
                            type: "error",
                          });
                        },
                        registerfail() {
                          this.$message({
                            message: "注册失败",
                            type: "error",
                          });
                        },
                     
                        repeatuser() {
                          this.$message({
                            message: "已经存在该用户名,请换一个新的",
                            type: "error",
                          });
                        },
                        isNaNphone() {
                          this.$message({
                            message: "请输入正确的电话格式",
                            type: "error",
                          });
                        },
                        writermessistage() {
                          this.$message({
                            message: "请输入注册信息",
                            type: "error",
                          });
                        },
                        yanjing() {
                          var password = document.getElementById("password");
                        
                        
                         
                       
                          password.type = 'text'
                          var yanjing = document.getElementById("yanjing")
                         yanjing.style.display = 'none';
                          var hideyanjing = document.getElementById("hideyanjing")
                           hideyanjing.style.display = 'block'
                         
                          console.log(25252525);
                        },
                        hideyanjing() {
                          var password = document.getElementById("password");
                        
                        
                         
                       
                          password.type = 'password'
                          var yanjing = document.getElementById("yanjing")
                         yanjing.style.display = 'block'
                          var hideyanjing = document.getElementById("hideyanjing")
                           hideyanjing.style.display = 'none'
                         
                          console.log(25252525);
                        },
                        suceessregister() {
                          this.$notify({
                            title: '成功',
                            message: '感谢加入❤❤❤❤',
                            type: 'success'
                          });
                        }
                      },
                    };
                    
            
    </script>


<style scoped>
/* #a1 {
  background: url("../assets/eva.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-position: center;
  background-size: cover;
} */
::v-deep .enterpriseName .el-input__inner {
    width:100%;
    background-color: #e8e8e8;
    text-align: center;
    border-color: #c0c4cc;
    color:#000
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: -100px 580px;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #ffffff57;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: absolute;
  margin-top: 18%;
  margin-left: 40%;
}
.el-input__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background-color: #ffffff07;
    background-image: none;
    border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0,0,0);
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
}
.el-input__inner {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background-color: #ffffff07;
    background-image: none;
    border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0,0,0);
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
#app {
  background-image: url("../assets/5.jpg");
  background-repeat: repeat;
  background-size: 1200rem 633rem;
  background-position: center;
  height: 100%;
  width: 100%;
  padding: 0%;
  background-size: cover;
  position: fixed;
}
div {
  margin: 0;
}
.el-form-item {
  background-color: unset !important;
}
el-switch el-tooltip is-checked {
  margin-top: -100px;
}
.el-input__wrapper{
  background-color: #ffffff2f;
}


</style>